<template>
  <div>
    <el-dialog v-model="dialogTableVisible" :title="`${menuForm.menuId ? '编辑' : '新增'}`" width="900" height="400">
      <el-form :model="menuForm" label-width="auto" style="max-width: 900px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="路由路径">
              <el-input v-model="menuForm.path" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由名称">
              <el-input v-model="menuForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由标题">
              <el-input v-model="menuForm.title" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="i18nKey">
              <el-input v-model="menuForm.i18nKey" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径">
              <el-input v-model="menuForm.component" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页面排序">
              <!-- <el-input v-model="menuForm.orderNum" /> -->
              <el-input-number v-model="menuForm.orderNum" min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由图标">
              <IconSelect v-model:value="menuForm.icon"></IconSelect>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否缓存">
              <el-radio-group v-model="menuForm.keepAlive">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否隐藏">
              <el-radio-group v-model="menuForm.hidden">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示在tag中">
              <el-radio-group v-model="menuForm.noTagsView">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="固定在tag中">
              <el-radio-group v-model="menuForm.affix">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链">
              <el-radio-group v-model="menuForm.isLink">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否嵌套">
              <el-radio-group v-model="menuForm.alwaysShow">
                <el-radio :value="true" border>是</el-radio>
                <el-radio :value="false" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="getSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import IconSelect from '@/components/IconSelect/IconSelect.vue'
  import type { SysMenuDo } from '../type'
  import { addSysMenu, updateSysMenuById } from '@/api/sysMenu'
  const emits = defineEmits(['getSysMenuTree'])
  const addType = ref('')
  const dialogTableVisible = ref(false)
  const menuForm = ref<SysMenuDo>({})
  function getAddorEdit(item: SysMenuDo, type: string = '') {
    addType.value = type
    switch (type) {
      case 'addChild':
        menuForm.value = {
          parentId: item.menuId,
          keepAlive: false,
          hidden: false,
          noTagsView: false,
          affix: false,
          alwaysShow: false,
          isLink: false,
          orderNum: 0,
          path: `${item.path}/`,
          component: `views${item.path}/`,
        }
        break
      case 'edit':
        menuForm.value = item
        break

      default:
        menuForm.value = { parentId: 0, keepAlive: false, hidden: false, noTagsView: false, affix: false, alwaysShow: false, isLink: false, component: 'Layout', orderNum: 0 }

        break
    }
    dialogTableVisible.value = true
  }
  function getSubmit() {
    if (addType.value === 'edit') {
      updateSysMenuById(menuForm.value).then((res) => {
        dialogTableVisible.value = false
        emits('getSysMenuTree')
      })
    } else {
      addSysMenu(menuForm.value).then((res) => {
        dialogTableVisible.value = false
        emits('getSysMenuTree')
      })
    }
  }
  defineExpose({
    getAddorEdit,
  })
</script>

<style scoped></style>
